@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        分类
                    </div>
                    <div class="list-group" id="category" style="max-height: 700px; overflow-y: scroll;">
                        <list-group-item v-for="item in items" v-bind:item="item" class="badge"></list-group-item>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        产品
                    </div>
                    <div class="list-group" id="product" style="max-height: 700px; overflow-y: scroll;">
                        <list-group-item v-for="item in items" v-bind:item="item" class=""></list-group-item>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        详细信息
                    </div>
                    <div class="panel-body" id="detail">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                  <td colspan="4">
                                    <h3>
                                        <a target="_blank" href="@{{url}}">
                                            @{{name}} <span v-if="from">- @{{from}}</span>
                                        </a>
                                    </h3>
                                  </td>
                                </tr>
                                <tr>
                                  <th scope="row">售价</th>
                                  <td>@{{price}}</td>
                                  <th scope="row">产量</th>
                                  <td>@{{number}}</td>
                                </tr>
                                <tr>
                                  <td colspan="4">@{{description}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        年化 <--> 万份
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-xs-5">
                          <div class="input-group">
                            <input id="first_per" type="text" class="form-control">
                            <span class="input-group-addon">%</span>
                          </div>
                        </div>
                        <div class="col-xs-2">
                          <button id="per_to_rmb" type="button" class="btn btn-default">转</button>
                        </div>
                        <div class="col-xs-5">
                          <div class="input-group">
                            <span class="input-group-addon">￥</span>
                            <input id="first_rmb" type="text" class="form-control">
                          </div>
                        </div>
                      </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        收益计算
                    </div>
                    <form id="caculate" v-on:submit.prevent="caculate" class="form-horizontal">
                        <div class="panel-body">
                            <div class="form-group">
                              <label class="col-sm-2 control-label">本金</label>
                              <div class="col-sm-10">
                                  <div class="input-group">
                                    <input name="money" type="text" class="form-control" v-model="money">
                                    <span class="input-group-addon">元</span>
                                  </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">利率</label>
                              <div class="col-sm-10">
                                  <select id="lilv" v-on:change="llSelect" v-model="per" class="form-control">
                                    <option v-for="opt in ll_opt" value="@{{ opt.val }}">@{{ opt.text }}</option>
                                  </select>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">年化</label>
                              <div class="col-sm-10">
                                  <div class="input-group">
                                    <input name="per" type="text" class="form-control" v-model="per">
                                    <span class="input-group-addon"> % </span>
                                  </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">持有</label>
                              <div class="col-sm-10">
                                  <div class="input-group">
                                    <input name="days" type="text" class="form-control" v-model="days">
                                    <span class="input-group-addon">天</span>
                                  </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">结果</label>
                              <div class="col-sm-10">
                              <textarea readonly="true" name="result" class="form-control" rows="3">@{{ result }}</textarea>
                              </div>
                            </div>
                          <!-- /.box-body -->
                        </div>
                        <div class="panel-footer">
                          <button type="reset" class="btn btn-default">重置</button>
                          <button type="submit" class="btn btn-info pull-right">计算</button>
                        </div>
                    </form>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        test
                    </div>
                    <div class="panel-body" id="test">
                        <div v-bind:id="dynamicId">1111</div>
                        <button v-bind:disabled="someDynamicCondition">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection



@section('script')
<script type="text/javascript">
    Vue.component('list-group-item', {
        props: ['item', 'class'],
        template: '<a href="#" class="list-group-item" data="@{{ item.id }}"><span class="@{{ class }}">@{{ item.count }}</span>@{{ item.name }}</a>'
    });

    var list_item = {items: null};
    var item_detail = {url: null, name: null, from: null, price: null, number: null,description: null};

    var category = new Vue({
        el: '#category',
        data: {
            items: [
                {"id":1,"name":"聚合阅读", "product":[
                    {"id":1,"name":"可译网","description":"翻译可以更简单",url:"https://coyee.com/",from:"可译网"},
                    {"id":2,"name":"简书","description":"",url:"http://www.jianshu.com/",from:"",username:"wuyuanhui@qq.com",password:"aaccbb"}
                ]},
                {"id":2,"name":"教育", "product":[
                    {"id":1,"name":"51CTO学院","description":"",url:"http://edu.51cto.com/",from:"51CTO"},
                    {"id":2,"name":"Laravist","description":"",url:"https://laravist.com/",from:"Laravist",username:"wuyuanhui@qq.com",password:"123456"},
                    {"id":3,"name":"Laracasts","description":"",url:"https://laracasts.com/",from:"Laracasts",username:"",password:""},
                    {"id":4,"name":"网易云课堂","description":"",url:"http://study.163.com/",from:""},
                    {"id":5,"name":"95后喜欢什么样儿的互联网公司","description":"",url:"https://www.huxiu.com/article/168006.html",from:"",username:"",password:""},
                    {"id":6,"name":"驾校一点通官网","description":"",url:"http://mnks.jxedt.com/",from:"",username:"",password:""}
                ]},
                {"id":3,"name":"Vue", "product":[
                    {"id":1,"name":"Vue.js 1.0 文档","description":"",url:"http://cn.vuejs.org/",from:"vuejs"},
                    {"id":2,"name":"Vue.js 2.0 文档","description":"",url:"http://vuefe.cn/",from:"vuefe"}
                ]},
                {"id":4,"name":"工具", "product":[
                    {"id":1,"name":"Chrome神器 - Vimium","description":"",url:"http://www.razorer.com/2016/08/11/Vimium/",from:"奥卡姆剃刀"},
                    {"id":2,"name":"在 Win10 里使用 sticky notes 便签","description":"",url:"http://jingyan.baidu.com/article/3ea51489d415cc52e71bba7b.html",from:"百度经验"},
                    {"id":3,"name":"我终于弄懂了各种前端build工具","description":"",url:"https://www.sdk.cn/news/5412",from:"SDK.CN"}
                ]},
                {"id":5,"name":"Laravel", "product":[
                    {"id":1,"name":"Laravel 5 和 Socket.IO 教程","description":"",url:"https://coyee.com/article/10670-laravel-5-and-socket-io-tutorial",from:"可译网"},
                    {"id":2,"name":"Laravel 5 WebSocket Chat with Redis and Socket.io","description":"",url:"https://github.com/oriceon/laravel-5-redis-and-socket.io",from:"Github"},
                    {"id":3,"name":"Socket.io和Redis写Realtime App","description":"",url:"https://laravist.com/series/realtime-laravel-app-with-socket-io",from:"Laravist"},
                    {"id":4,"name":"Laravel的核心概念","description":"服务容器、依赖注入、服务绑定；Contracts、Facades",url:"https://lufficc.com/blog/the-core-conception-of-laravel",from:"lufficc"},
                    {"id":5,"name":"Laravel 5 开发 API 教程","description":"",url:"https://laravist.com/series/dive-into-restful-api-with-laravel",from:"Laravist"},
                    {"id":6,"name":"OAuth 2.0 Server for Laravel","description":"",url:"https://github.com/lucadegasperi/oauth2-server-laravel",from:""},
                    {"id":7,"name":"Fractal","description":"",url:"http://fractal.thephpleague.com/",from:""},
                    {"id":8,"name":"What is the difference between find() findOrFail() first() firstOrFail","description":"",url:"http://stackoverflow.com/questions/33027047/what-is-the-difference-between-find-findorfail-first-firstorfail",from:""},
                    {"id":9,"name":"flarum","description":"1. 注释 .htaccess 文件的 Header unset Proxy；2. 配置 php.ini 的 session.save_path；",url:"https://github.com/flarum/flarum",from:"Github"},
                    {"id":9,"name":"Flarum Simplified Chinese Language Pack","description":"",url:"https://github.com/Flarum-Chinese/flarum-ext-simplified-chinese",from:"Github"},
                    {"id":10,"name":"Laravel.io Community Portal","description":"",url:"https://github.com/laravelio/laravel.io",from:"Github"}
                ]},
                {"id":6,"name":"运行环境", "product":[
                    {"id":1,"name":"一步一步教你部署自己的Laravel应用程序到服务器","description":"包括Php7.1安装与下载，SSL证书申请与配置，Mysql升级到5.7，Nginx服务器的简单配置。",url:"https://lufficc.com/blog/step-by-step-teach-you-to-deploy-your-laravel-application-to-server",from:"lufficc"},
                    {"id":2,"name":"nginx简易教程","description":"",url:"http://www.cnblogs.com/jingmoxukong/p/5945200.html",from:"博客园"}
                ]},
                {"id":7,"name":"运动", "product":[
                    {"id":1,"name":"这么锻炼3分钟等于健身房3小时","description":"",url:"http://news.mydrivers.com/1/502/502777.htm",from:"驱动之家"}
                ]},
                {"id":8,"name":"Redis", "product":[
                    {"id":1,"name":"Redis 中文官网","description":"",url:"http://www.redis.cn/",from:""},
                    {"id":2,"name":"Redis 命令参考","description":"",url:"http://redisdoc.com/index.html",from:""},
                    {"id":3,"name":"phpredis 扩展文档","description":"",url:"https://github.com/phpredis/phpredis",from:"Github"},
                    {"id":4,"name":"Redis 学习路线","description":"",url:"http://blog.huangz.me/diary/2016/how-to-learn-redis.html",from:""},
                    {"id":5,"name":"删除 Redis 所有 KEY","description":"",url:"http://ssuupv.blog.163.com/blog/static/1461567220135610456193",from:""},
                    {"id":6,"name":"对比 Redis 与 Memcached","description":"",url:"http://blog.huangz.me/diary/2015/comparison-of-redis-and-memcached.html",from:""}
                ]},
                {"id":9,"name":"Javascript", "product":[
                    {"id":1,"name":"SSE：服务器发送事件","description":"",url:"http://javascript.ruanyifeng.com/htmlapi/eventsource.html",from:"JavaScript 标准参考教程"},
                    {"id":2,"name":"SOCKET.IO","description":"",url:"http://socket.io/",from:""},
                    {"id":3,"name":"Get Started: Chat application","description":"",url:"http://socket.io/get-started/chat/",from:"SOCKET.IO"},
                    {"id":4,"name":"jQuery API 中文文档","description":"",url:"http://www.jquery123.com/",from:""}
                ]},
                {"id":10,"name":"基金", "product":[
                    {"id":1,"name":"天天基金网","description":"",url:"http://fund.eastmoney.com/",from:"",username:"15626018135",password:"wgg987654321"},
                    {"id":2,"name":"证券投资，从这里开始！","description":"",url:"http://cn.morningstar.com/cover/school.aspx",from:"晨星网"},
                    {"id":3,"name":"贷款利率","description":"",url:"http://data.bank.hexun.com/ll/dkll.aspx",from:"和讯网"},
                    {"id":4,"name":"存款利率","description":"",url:"http://data.bank.hexun.com/ll/ckll.aspx",from:"和讯网"},
                    {"id":5,"name":"天弘余额宝货币","description":"",url:"http://www.thfund.com.cn/fundinfo/000198",from:"天弘基金管理有限公司"},
                    {"id":6,"name":"天天基金交易","description":"",url:"https://login.1234567.com.cn/",from:"",username:"15626018135",password:"wgg7331157"},
                    {"id":7,"name":"何谓选择基金的“4433法则”","description":"",url:"http://guba.eastmoney.com/news,ofof163110,560562027.html",from:"",username:"",password:""},
                    {"id":8,"name":"谈谈提高基金定投收益的正确姿势","description":"",url:"http://guba.eastmoney.com/news,of210004,569678969.html",from:"",username:"",password:""},
                    {"id":9,"name":"走出投资基金的误区","description":"",url:"http://guba.eastmoney.com/news,of519983,569673772.html",from:"",username:"",password:""},
                    {"id":10,"name":"基金后面的小尾巴ABCDE都是什么意思？","description":"",url:"http://fund.eastmoney.com/news/1594,20161108681834458.html",from:"天天基金网"},
                    {"id":11,"name":"漫谈“最大回撤”","description":"",url:"http://tech.163.com/14/0326/16/9O9CHMN700094ODU.html",from:"网易科技"},
                    {"id":12,"name":"优矿，您的私人量化平台","description":"",url:"https://uqer.io/home/",from:""},
                    {"id":13,"name":"好买基金网","description":"",url:"http://www.howbuy.com/",from:""},
                    {"id":14,"name":"广发证券金融终端","description":"",url:"#",from:"",username:"031500021495",password:"890622"}
                ]},
                {"id":11,"name":"微信开发", "product":[
                    {"id":1,"name":"全球首个微信小程序（应用号）开发教程！","description":"",url:"https://my.oschina.net/wwnick/blog",from:"开源中国社区"},
                    {"id":2,"name":"小程序开发文档","description":"",url:"https://mp.weixin.qq.com/debug/wxadoc/dev/index.html",from:"官方文档"},
                    {"id":3,"name":"小程序设计指南","description":"",url:"https://mp.weixin.qq.com/debug/wxadoc/design/index.html",from:"官方文档"},
                    {"id":4,"name":"小程序开发者工具","description":"",url:"https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html",from:"官方文档"},
                    {"id":5,"name":"从搭建一个微信小程序开始","description":"",url:"https://www.qcloud.com/act/event/yingyonghao.html",from:"腾讯云"},
                    {"id":6,"name":"微信小程序的想象力与不可想象域","description":"",url:"http://www.geekpark.net/topics/217159",from:"极客公园"}
                ]},
                {"id":12,"name":"Swoole", "product":[
                    {"id":1,"name":"Swoole 入门教程","description":"",url:"https://github.com/szyhf/swoole_study",from:"Github"}
                ]},
                {"id":13,"name":"Linux", "product":[
                    {"id":1,"name":"linux下查看和添加PATH环境变量","description":"",url:"http://blog.csdn.net/dlutbrucezhang/article/details/8811456",from:"CSDN"}
                ]},
                {"id":14,"name":"规范", "product":[
                    {"id":1,"name":"中文技术文档的写作规范","description":"",url:"https://github.com/ruanyf/document-style-guide",from:"Github"},
                    {"id":2,"name":"APIDOC","description":"",url:"http://apidocjs.com",from:""},
                    {"id":3,"name":"简述 OAuth 2.0 的运作流程","description":"",url:"http://www.barretlee.com/blog/2016/01/10/oauth2-introduce/",from:""},
                    {"id":4,"name":"理解OAuth 2.0","description":"",url:"http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html",from:""},
                    {"id":5,"name":"OAuth 2.0系列教程","description":"",url:"http://ifeve.com/oauth2-tutorial-all/",from:""},
                    {"id":6,"name":"CAS protocol","description":"Enterprise Single Sign-On for All",url:"https://apereo.github.io/cas/4.2.x/protocol/CAS-Protocol.html",from:""}
                ]},
                {"id":15,"name":"PHP", "product":[
                    {"id":1,"name":"PHP高级编程之发布订阅","description":"",url:"http://www.netkiller.cn/journal/php.redis.html",from:"netkiller"}
                ]},
                {"id":16,"name":"网贷平台", "product":[
                    {"id":1,"name":"网贷天眼","description":"",url:"http://www.p2peye.com/",from:"",username:"",password:""},
                    {"id":2,"name":"贷罗盘","description":"",url:"http://dailuopan.com/",from:"",username:"",password:"",paypwd:""},
                    {"id":3,"name":"民贷天下","description":"",url:"http://www.mindai.com/",from:"",username:"15626018135",password:"5ba46b30d2",paypwd:"wgg987654321"},
                    {"id":4,"name":"PPmoney","description":"",url:"https://www.ppmoney.com/",from:"",username:"15626018135",password:"59eaf5d2c8",paypwd:""},
                    {"id":5,"name":"新三板P2P第一股PPmoney惊人幕后！虚假披露、关联融资、关联担保、拆标与错配","description":"",url:"http://mp.weixin.qq.com/s?idx=1&mid=2651036276&__biz=MjM5MDAyNzQ0MA%3D%3D&sn=0c764238f7dae70c2d327ed4c0dd0ed5",from:"",username:"",password:"",paypwd:""},
                    {"id":6,"name":"老板曾随习总出访的PPmoney，资金链已极度紧绷","description":"",url:"http://www.76676.com/html/2016/news_p2p_0625/14493.html",from:"",username:"",password:"",paypwd:""}
                ]},
                {"id":17,"name":"银行", "product":[
                    {"id":1,"name":"中国银行借记卡","description":"",url:"#",from:"",username:"6217857000001936275",password:"331157"},
                    {"id":2,"name":"中国银行手机银行","description":"",url:"#",from:"",username:"15626018135",password:"wgg7331157"}
                ]},
                {"id":18,"name":"网上服务", "product":[
                    {"id":1,"name":"12308-全国汽车票预订平台","description":"",url:"http://www.12308.com/",from:"",username:"15626018135",password:"wgg987654321"}
                ]},
                {"id":19,"name":"电影电视", "product":[
                    {"id":1,"name":"未来人类如何被机器人干掉？快来补神剧《西部世界》","description":"",url:"http://www.ifanr.com/757424",from:"爱范儿",username:"",password:""}
                ]}
            ]
        },
        methods: {
            click: function(e){
                var el = $(e.target);
                el.addClass('active').siblings().removeClass('active');

                var id = el.attr('data');
                $.each(this.items, function(i, v){
                    if (v.id == id) {
                        list_item.items = v.product;
                        return false;
                    }
                });
                return false;
            }
        },
        ready: function(){
            var self = this;
            $(self.$el).on('click', '.list-group-item', function(e){
                return self.click(e);
            }).find('.list-group-item').eq(0).click();
        }
    });

    var product = new Vue({
        el: '#product',
        data: list_item,
        methods: {
            click: function(e){
                var el = $(e.target);
                el.addClass('active').siblings().removeClass('active');

                var id = el.attr('data');
                $.each(this.items, function(i, v){
                    if (v.id == id) {
                        $.extend(item_detail, v);
                        return false;
                    }
                });
                return false;
            }
        },
        ready: function(){
            var self = this;
            $(self.$el).on('click', '.list-group-item', function(e){
                return self.click(e);
            }).find('.list-group-item').eq(0).click();
        }
    });

    var detail = new Vue({
        el: '#detail',
        data: item_detail
    });

    new Vue({
        el: '#caculate',
        data: {
            money  : 10000,
            ll_opt : [
                {val: '4', text: '== 自定义 =='},
                {val: '0.35', text: '活期存款 0.35'},
                {val: '1.10', text: '3个月整存整取 1.10'},
                {val: '1.30', text: '6个月整存整取 1.30'},
                {val: '1.50', text: '一年整存整取 1.50'},
                {val: '2.10', text: '二年整存整取 2.10'},
                {val: '2.75', text: '三年整存整取 2.75'},
                {val: '2.36', text: '余额宝约 2.36'},
                {val: '4.35', text: '贷款一年内 4.35'},
                {val: '4.75', text: '贷款三年内 4.75'},
                {val: '4.75', text: '贷款五年内 4.75'},
                {val: '4.90', text: '贷款五年以上 4.90'}
            ],
            per    : 4,
            days   : 365,
            result : ''
        },
        methods: {
            llSelect: function(){
                $(this.$el).find("[name='per']").focus();
            },
            caculate: function(){
                this.result = '';
                if (this.money != '' && this.per != '' && this.days != '') {
                    this.result += '获得收益：' + (Math.round(this.money * this.per * this.days / 365) / 100);
                    this.result += '\n月均收益：' + (Math.round(this.money * this.per * 300 / 365) / 1000);
                    this.result += '\n万份收益：' + (Math.round(100000 * this.per / 365) / 1000);
                }
            }
        }
    });

    new Vue({
        el: '#test',
        data: {
            dynamicId: false,
            someDynamicCondition: false
        }
    });

    $('#per_to_rmb').click(function(){
        var per = parseFloat($('#first_per').val());
        var rmb = parseFloat($('#first_rmb').val());
        if (per != 0 && !isNaN(per)) {
            var res = Math.round(100000 * per / 365) / 1000;
            $('#first_rmb').val(res);
        } else if (rmb != 0 && !isNaN(rmb)) {
            var res = Math.round(rmb * 365) / 100;
            $('#first_per').val(res);
        } else {}
        return false;
    });

</script>
@endsection